<nav class="bg-dark mb-4 navbar navbar-dark navbar-expand-md">
  <a [routerLink]="['/home']" class="navbar-brand">
    <em>Angular OIDC Code Flow Standalone</em>
  </a>
  <button
    aria-controls="navbarCollapse"
    aria-expanded="false"
    aria-label="Toggle navigation"
    class="navbar-toggler"
    data-target="#topNavbarCollapse"
    data-toggle="collapse"
    type="button"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="topNavbarCollapse">
    <ul class="mr-auto navbar-nav">
      @if (authenticated().isAuthenticated) {
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['home']">home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['protected']">protected</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['forbidden']">forbidden</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['customers']">lazy customers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="logout()">Logout</a>
      </li>
      } @else {
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['protected']"
          >Route to 'protected' Route & Auto Login</a
        >
      </li>
      }
    </ul>
  </div>
</nav>
